import { img_prefix_url } from '../../config/site';//'https://yw.52kfw.cn'
import {
    getDetail,
    addComment,
    getComments,
    viewCountAdd,
    collectNews,
    collectNewsList,
    cancelCollect
} from "../../api/news";
// 使用 mapState 辅助函数帮助我们生成计算属性
import { mapState } from 'vuex'

// node.js获取当前时间并格式化require(‘moment‘)
// npm install --save moment
var moment = require('moment');
moment.locale('zh_cn');
//   var numeral = require('numeral');

export default {
    data() {
        return {
            img_prefix_url,
            // 新闻详情
            newsDetail: {},
            // 新闻id
            newsId: '',
            // 处理后的时间
            createDate: '',
            createTime: '',
            // 处理后的文本换行
            text: '',
            // 评论列表
            comments: [],
            currentPage: 1,
            total: 0,
            size: 3,
            // 评论表单内容
            markup: '',
            // 获取用户id
            uid: '', //this.uid = this.userInfo._id
            // 收藏
            isCollect: false,
            collectIds: [],
        };
    },
    created() {
        // 获取路由传来的资讯id、没有则为'0'
        this.newsId = this.$route.query.newsId ? this.$route.query.newsId : '0';



        this.getNewsDetailHandle()
        this.addViewHandle()
        // 获取收藏列表
        this.collectNewsListHandler();
        // 获取评论
        this.getComments(this.newsId);

        console.log(this.isCollect);
    },
    updated() {
        // 获取收藏列表
        this.collectNewsListHandler();
        // 即时更新页面的收藏状态
        this.isCollectChange;
    },
    // 监视变化
    computed: {
        // 返回true或者false
        isCollectChange: {
            get: function () {
                this.isCollect = this.collectIds.includes(this.newsId);
                console.log(this.isCollect);
                return this.isCollect
            },
        },
        // 获取更新的用户信息
        // 获取mapState中的userInfo
        // 当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。
        ...mapState(['userInfo']),
    },
    methods: {
        getNewsDetailHandle() {
            // console.log(this.$route);
            // console.log(this.$route.params.newsId);
            this.getNewsDetail();
        },
        async getNewsDetail() {
            let res = await getDetail(this.newsId);
            this.loading = false;
            console.log(res);
            if (res.data.statusCode === 200) {
                // 一次性渲染
                this.newsDetail = res.data.data.info;
                // console.log(res.data.data.info.createTime.slice(0,10));
                this.createDate = res.data.data.info.createTime.slice(0, 10)
                // console.log(res.data.data.info.createTime.slice(11,19));
                this.createTime = res.data.data.info.createTime.slice(11, 19)
                // 处理文本换行
                this.text = res.data.data.info.description.replace(/\n/g, '<br>')
                // this.newsId = res.data.data.info._id
            } else {
                // vant的全局消息通知
                this.$notify({
                    type: 'danger',
                    message: '获取新闻失败',
                    duration: 1000,
                });
                console.log(res.data.message);
            }
        },
        // 增加阅读量
        addViewHandle() {
            // console.log(this.$route);
            // console.log(this.$route.params.newsId);
            this.getNewsDetail();
        },
        async addView() {
            const res = await this.$http.post('news/viewAdd', {
                params: {
                    newsId: this.newsId,
                    // newsId: '62313b2a2b1b3e1a66e6c06e',
                }
            })
            console.log(res)
        },
        // 获取收藏列表
        async collectNewsListHandler() {
            if (!this.userInfo._id) {
                this.collectIds = [];
                console.log(this.collectIds);
                return;
            } else {
                let info = await collectNewsList(this.userInfo._id);
                if (info.data.statusCode == 200) {
                    this.collectIds = info.data.data.collectionList.collectNewsIds ? info.data.data.collectionList.collectNewsIds : [];
                    // console.log(this.collectIds);
                    // 即时更新页面的收藏状态
                    this.isCollectChange;
                } else {
                    this.$notify({ type: 'danger ', message: '登录状态异常！！', duration: 1500 });
                    return;
                }
            }
        },


        async unCollectNews(item) {
            console.log(this.isCollect);
            // this.isCollect = false
            if (!this.userInfo._id) {
                this.$notify({ type: 'danger ', message: '请登录后在操作！！！', duration: 1500 });
                return;
            } else {
                let info = await cancelCollect(item._id, this.userInfo._id);
                // let info = await this.$http.get('questions/cancelCollect', { newsId: this.newsId });
                console.log(info);
                if (info.data.statusCode == 200) {
                    this.$notify({ type: 'success ', message: '取消收藏', duration: 500 });
                    this.collectNewsListHandler();
                    // this.isCollect = false
                } else {
                    this.$notify({ type: 'danger', message: '取消失败！' + info.data.message, duration: 500 });
                }
            }
        },

        async collectNewsHandler(item) {
            console.log(this.isCollect);
            // this.isCollect = true
            if (!this.userInfo._id) {
                this.$notify({ type: 'danger ', message: '请登录后在操作！！！', duration: 1500 });
                return;
            } else {
                let info = await collectNews(item._id, this.userInfo._id);
                if (info.data.statusCode == 200) {
                    this.$notify({ type: 'success ', message: '收藏成功', duration: 500 });
                    this.collectNewsListHandler();
                    // this.isCollect = true
                } else {
                    this.$notify('系统繁忙！');
                }
            }
        },
        // 获取评论
        async getComments(newsId, page = 1, size = 3) {
            let info = await getComments(newsId, page, size);
            this.comments = info.data.data.commentList;
            this.total = info.data.data.total;

        },
        formatTime1(val) {
            return moment(val).fromNow();
        },
        getPageComments(page) {
            this.currentPage = page;
            this.getComments(this.newsId, this.currentPage, this.size);
        },
        async onSubmit(values) {
            if (!this.userInfo._id) {
                this.$notify({ type: 'danger ', message: '请登录后在操作！！！', duration: 1500 });
                return;
            }
            if (values.markup.trim() == '') {
                this.$notify({ type: 'danger ', message: '请输入内容后提交！！！', duration: 1500 });
                return;
            }

            let comments = {
                "content": values.markup,
                "newsId": this.newsId,
                "title": this.newsDetail.title,
            };

            let info = await addComment(comments);
            if (info.data.statusCode == 200) {
                this.markup = '';

                this.$notify({ type: 'success ', message: '发布成功', duration: 300 });

                this.currentPage = 1;
                this.getComments(this.newsId);

            } else {
                this.$notify('系统繁忙！');
            }

        },

    }
}